<template>
  <div class="wrap">
    <div>
      <!-- <span class="text">{{info.dayRate?'日环比率':'日环比'}}</span> -->
      <span class="text">日环比率</span>
      <span :style="{color: info.today == '-' || Number(info.today) == 0? '' : Number(info.today) > 0 ? '#EA4E4E' : '#3BB970'}">
        <i :class="info.today == '-' || Number(info.today) == 0 ? '' :Number(info.today) > 0 ? 'el-icon-xiangshangjiantoucuxiao' : 'el-icon-xiangxiajiantoucuxiao'" ></i>
        <span class="number" >{{info.today}}{{info.today == '-'? '': '%'}}</span>
        <!-- <span class="number" >{{(info.dayDiff==0?'-':info.dayDiff)||(info.dayRate=='0'?'-':info.dayRate)}}</span> -->
      </span>
    </div>
    <div style="margin-left: 16%">
      <!-- <span class="text">{{info.weekRate?'周环比率':'周环比'}}</span> -->
       <span class="text">周环比率</span>
       <span :style="{color: info.week == '-' || Number(info.week) == 0? '' : Number(info.week) > 0 ? '#EA4E4E' : '#3BB970'}">
        <i :class="info.week == '-' || Number(info.week) == 0 ? '' :Number(info.week) > 0 ? 'el-icon-xiangshangjiantoucuxiao' : 'el-icon-xiangxiajiantoucuxiao'" ></i>
        <span class="number" >{{info.week}}{{info.week == '-'? '': '%'}}</span>
        <!-- <span class="number" >{{(info.dayDiff==0?'-':info.dayDiff)||(info.dayRate=='0'?'-':info.dayRate)}}</span> -->
        </span>
      <!-- <span :style="{color: info.weekState === 'up' ? '#EA4E4E' :info.weekState === 'down' ? '#3BB970':''}">
        <i :class="info.weekState === 'up' ? 'el-icon-xiangshangjiantoucuxiao' : info.weekState === 'down' ?'el-icon-xiangxiajiantoucuxiao':''"></i>
        <span class="number" >{{(info.weekDiff==0?'-':info.weekDiff)||(info.weekRate=='0'?'-':info.weekRate)}}</span>
      </span> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'compareCom',
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrap {
  display: flex;
  /* justify-content: space-between; */
}
.text {
  margin-right: 16px;
  color: #BFBFBF;
  font-size: 12px;
}
.number {
  font-weight: 500;
  font-family: GothamSSm_Book;
}
</style>
